<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%@include file="/WEB-INF/views/common.jsp" %>
    <script src="/static/ui/easyui/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        body {
            background: #E0ECFF;
            font: bold 12px Arial, Helvetica, sans-serif;
            margin: 0;
            padding: 0;
            min-width: 960px;
            color: #E0ECFF;
        }

        a {
            text-decoration: none;
            color: #00c6ff;
        }

        h1 {
            font: 4em normal Arial, Helvetica, sans-serif;
            padding: 20px;
            margin: 0;
            text-align: center;
        }

        h1 small {
            font: 0.2em normal Arial, Helvetica, sans-serif;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            line-height: 5em;
            display: block;
        }

        h2 {
            font-weight: 700;
            color: #bbb;
            font-size: 20px;
        }

        h2, p {
            margin-bottom: 10px;
        }

        .container {
            width: 960px;
            margin: 0 auto;
            overflow: hidden;
        }

        .clock {
            width: 550px;
            margin: 0 auto;
            padding: 30px;
            border: 0px solid #99cdff;
            color: #FFFFFF;
        }

        #Date {
            font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
            font-size: 40px;
            text-align: center;
            text-shadow: 0 0 10px #0099CC;
        }

        ul {
            width: 400px;
            margin: 0 auto;
            padding: 0px;
            list-style: none;
            text-align: center;
        }

        ul li {
            display: inline;
            font-size: 40px;
            text-align: center;
            font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
            text-shadow: 0 0 10px #0099CC;
        }

        #point {
            position: relative;
            -moz-animation: mymove 1s ease infinite;
            -webkit-animation: mymove 1s ease infinite;
            padding-left: 10px;
            padding-right: 10px;
        }

        @-webkit-keyframes mymove {
            0% {
                opacity: 1.0;
                text-shadow: 0 0 20px #00c6ff;
            }
            50% {
                opacity: 0;
                text-shadow: none;
            }
            100% {
                opacity: 1.0;
                text-shadow: 0 0 20px #00c6ff;
            }
        }

        @-moz-keyframes mymove {
            0% {
                opacity: 1.0;
                text-shadow: 0 0 20px #00c6ff;
            }
            50% {
                opacity: 0;
                text-shadow: none;
            }
            100% {
                opacity: 1.0;
                text-shadow: 0 0 20px #00c6ff;
            }
        }

    </style>
    <script type="text/javascript" src="/static/ui/js/jquery-1.6.4.min.js" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function () {
// Create two variable with the names of the months and days in an array
            var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
            var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

// Create a newDate() object
            var newDate = new Date();
// Extract the current date from Date object
            newDate.setDate(newDate.getDate());
// Output the day, date, month and year
            $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

            setInterval(function () {
                // Create a newDate() object and extract the seconds of the current time on the visitor's
                var seconds = new Date().getSeconds();
                // Add a leading zero to seconds value
                $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
            }, 1000);

            setInterval(function () {
                // Create a newDate() object and extract the minutes of the current time on the visitor's
                var minutes = new Date().getMinutes();
                // Add a leading zero to the minutes value
                $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
            }, 1000);

            setInterval(function () {
                // Create a newDate() object and extract the hours of the current time on the visitor's
                var hours = new Date().getHours();
                // Add a leading zero to the hours value
                $("#hours").html(( hours < 10 ? "0" : "" ) + hours);
            }, 1000);
        });
    </script>
    <style>
    </style>
</head>
<body style="overflow: hidden;background-image: url('/static/images/black_2.jpg');background-size: cover">
<div style="width:99%;border: none;" class="easyui-layout">
    <div class="clock" align="right" style="margin-left: 60%;margin-top: 0%">
        <div id="Date"></div>
        <ul>
            <li id="hours"></li>
            <li id="point">:</li>
            <li id="min"></li>
            <li id="point">:</li>
            <li id="sec"></li>
        </ul>
    </div>
    <div style="margin-right:50%">
    <%--<div style="position: absolute;top: 30px;left: 70%">--%>
        <%@include file="/WEB-INF/views/calendar.jsp" %>
    </div>
    <span style="position: absolute;top: 30px;left: 90px;font-size: 40px;color: #FFFFFF;text-shadow: 0 0 10px #0099cc">
        欢迎登录小码哥车险平台系统
    </span>
    <div id="aa" class="easyui-accordion" style="width:600px;height:329px;position: absolute;top: 175px;left: 90px">
        <div title="我们的口号" data-options="selected:true" style="overflow:auto;padding:10px;">
            <h1 style="color:#0099FF;font-weight: bolder">小 码 哥 车 险</h1>
            <center><h1 style="font-size: 32px;font-weight: bolder"><p>车快不怕急转弯,一路狂漂秋名山!</p></h1></center>
        </div>
        <div title="今日待办事项"  style="padding:10px;font-size: 4px">
            <h2>Schedule:1.项目评比</h2>
            <h2>Schedule:2.卖保险</h2>
        </div>
        <div title="已完成事项" style="padding:10px;font-size: 4px" >
            <h2> 别点了,想不出内容了...</h2>
        </div>
    </div>
</div>
</body>
</html>
